(function () {
  const checkAll = document.querySelector(".checkAll");
  const cks = document.querySelectorAll(".cks");
  checkAll.addEventListener("click", function () {
    for (let i = 0; i < cks.length; i++) {
      cks[i].checked = checkAll.checked;
    }
  });
  for (let i = 0; i < cks.length; i++) {
    cks[i].addEventListener("click", function () {
      checkAll.checked =
        document.querySelectorAll(".cks:checked").length === cks.length;
    });
  }
  // 点击全选按钮
  const btnAll = document.querySelector(".btnAll");
  btnAll.addEventListener("click", function () {
    checkAll.checked = true;
    for (let i = 0; i < cks.length; i++) {
      cks[i].checked = true;
    }
  });
  // 点击群不选按钮
  const btnDisAll = document.querySelector(".btnDisAll");
  btnDisAll.addEventListener("click", function () {
    checkAll.checked = false;
    for (let i = 0; i < cks.length; i++) {
      cks[i].checked = false;
    }
  });
  // 点击反选
  const positive = document.querySelector(".positive");
  positive.addEventListener("click", function () {
    for (let i = 0; i < cks.length; i++) {
      if (cks[i].checked) {
        cks[i].checked = false;
      } else {
        cks[i].checked = true;
      }
    }
    checkAll.checked =
      document.querySelectorAll(".cks:checked").length === cks.length;
  });
  // 点击提交并打印
  const postPrint = document.querySelector(".postPrint");
  postPrint.addEventListener("click", function (e) {
    console.clear();
    e.preventDefault();
    let count = 0;
    cks.forEach(function (item) {
      if (item.checked) {
        count++;
        console.log(item.name);
      }
    });
    if (!count) {
      console.log(null);
    }
  });
})();
(function () {
  let guangZhou = document.querySelector(".guangZhou");
  let beiJing = document.querySelector(".beiJing");
  let shangHai = document.querySelector(".shangHai");
  let siChuan = document.querySelector(".siChuan");
  let shenZhen = document.querySelector(".shenZhen");
  let ul = document.querySelector("ul");
  // 创建节点
  guangZhou.addEventListener("click", function () {
    if (!document.querySelector(".liGzhou")) {
      let liGzhou = document.createElement("li");
      liGzhou.className = "liGzhou";
      liGzhou.appendChild(document.createTextNode("广州"));
      ul.appendChild(liGzhou);
    } else {
      alert("该城市已经存在");
    }
  });
  beiJing.addEventListener("click", function () {
    if (!document.querySelector(".liBjing")) {
      let liBjing = document.createElement("li");
      liBjing.className = "liBjing";
      liBjing.appendChild(document.createTextNode("北京"));
      ul.appendChild(liBjing);
    } else {
      alert("该城市已经存在");
    }
  });
  shangHai.addEventListener("click", function () {
    if (!document.querySelector(".liShai")) {
      let liShai = document.createElement("li");
      liShai.className = "liShai";
      liShai.appendChild(document.createTextNode("上海"));
      ul.appendChild(liShai);
    } else {
      alert("该城市已经存在");
    }
  });
  siChuan.addEventListener("click", function () {
    if (!document.querySelector(".liSchuan")) {
      let liSchuan = document.createElement("li");
      liSchuan.className = "liSchuan";
      liSchuan.appendChild(document.createTextNode("四川"));
      ul.appendChild(liSchuan);
    } else {
      alert("该城市已经存在");
    }
  });
  shenZhen.addEventListener("click", function () {
    if (!document.querySelector(".liSzhen")) {
      let liSzhen = document.createElement("li");
      liSzhen.className = "liSzhen";
      liSzhen.appendChild(document.createTextNode("深圳"));
      ul.appendChild(liSzhen);
    } else {
      alert("该城市已经存在");
    }
  });
  // 广州插入节点
  (function () {
    let gPreB = document.querySelector(".gPreB");
    gPreB.addEventListener("click", function () {
      if (!document.querySelector(".liGzhou")) {
        alert("广州城市不存在");
      } else if (!document.querySelector(".liBjing")) {
        alert("北京城市不存在");
      } else {
        // 获取广州
        let liGzhou = document.querySelector(".liGzhou");
        // 获取北京
        let liBjing = document.querySelector(".liBjing");
        ul.insertBefore(liGzhou, liBjing);
      }
    });
  })();
  // 使用广州节点替换北京节点
  (function () {
    let gRepB = document.querySelector(".gRepB");
    gRepB.addEventListener("click", function () {
      if (!document.querySelector(".liGzhou")) {
        alert("广州城市不存在");
      } else if (!document.querySelector(".liBjing")) {
        alert("北京城市不存在");
      } else {
        // 获取广州
        let liGzhou = document.querySelector(".liGzhou");
        // 获取北京
        let liBjing = document.querySelector(".liBjing");
        ul.replaceChild(liGzhou, liBjing);
      }
    });
  })();
  // 删除广州节点
  (function () {
    let gDel = document.querySelector(".gDel");
    gDel.addEventListener("click", function () {
      if (!document.querySelector(".liGzhou")) {
        alert("广州城市不存在");
      } else {
        document.querySelector(".liGzhou").remove();
      }
    });
  })();
  // 读取当前列表结构
  (function () {
    let readCity = document.querySelector(".readCity");
    readCity.addEventListener("click", function () {
      console.log(ul.cloneNode(true));
    });
  })();
  // 读取北京内的结点
  (function () {
    let readBjing = document.querySelector(".readBjing");
    readBjing.addEventListener("click", function () {
      if (!document.querySelector(".liBjing")) {
        alert("北京城市不存在");
      } else {
        let liBjing = document.querySelector(".liBjing");
        console.log(liBjing.cloneNode());
      }
    });
  })();
})();